<template>
    <div>
     这是{{ data.name }}{{ data.data }}
       {{ dd }}1111111111
 


     <div v-bind="cla">1111</div>
    <myComponents title="这是父传给子的东西" cc="1111111" @cl="handleClick"></myComponents>
     <!-- <button @click="handleClick">1111111111</button> -->


     <button @click="parentSon">子组件的值{{data.cc}}</button>
    </div>
</template>

<script setup lang="ts">
import { inject, onActivated, onDeactivated, onMounted, onUnmounted, provide, reactive, ref } from "vue";
import axios from "axios"
import myComponents from "../../components/myComponents.vue";
    const data=reactive({
        name:"a",
        data:[],
        sys:false,
        cc:2
    });


    const dd=inject("dd")
    provide("cc",8888)

//获取子组件传的值
const handleClick=(val:any)=>{
    console.log(val);
    
}

    const cla=ref({
        class:!data.sys?data.cc==1?'parent red':"parent":"" ,
        id:"son",
    })
   
    function aa(){
        console.log("aaaaaaaaaaaaaa");
        
        axios.post("https://www.mryang.fun/api/User/Logins",{account:"16651737795",password:"888888"}).then((res)=>{
           data.data= res.data.data.token;
            console.log(data.data);
            
        })
    }


    onMounted(()=>{
        // aa()
        console.log("OnMounted");
      


        
    })


    onActivated(()=>{
        console.log("a onActivated");
        aa();
        
    })
     onUnmounted(()=>{
        console.log(11111888888888);   
     })

</script>

<style scoped>
  .parent{
     
      height: 100px;
    
  }

  #son{
      width: 50px;
    
      background: blue;
  }

  .red{
    color: red;
  }
</style>